<div class="d-flex align-items-center mt-5">
    <h3 class="mr-auto">{{ filter.targetType == targetType.Screening ? 'Screening Results' : 'Report Preview' }}</h3>
    <div class="ml-auto">
        <div class="dropdown action-buttons generate-button">
            <button class="btn  dropdown-toggle ml-2" type="button" id="generateButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                [disabled]="columns === undefined || columns.length == 0" [ngClass]="{'btn-transparent': columns === undefined || columns.length == 0, 'btn-primary-dark': columns !== undefined && columns.length > 0}">
                Generate Report
                <i class="ti-angle-down ml-2"></i>
            </button>
            <div class="dropdown-menu" aria-labelledby="generateButton">
                <a class="dropdown-item" (click)="type = lrtmType.ScreeningToolExcel; generateReport();" href="javascript:;;">Excel</a>
                <a class="dropdown-item" (click)="type = lrtmType.ScreeningToolCSV; generateReport();" href="javascript:;;">CSV</a>
            </div>
        </div>
        <button *ngIf="filter.targetType == targetType.Screening" class="btn btn-transparent ml-2" (click)="savePortfolio()" [disabled]="count == 0">Save Portfolio</button>
        <button *ngIf="filter.isCurrentUserOwner == true && filter.type != filterType.Standard" class="btn btn-transparent ml-2" (click)="reorderModal.show()" [disabled]="columns.length == 0">Reorder Columns</button>
    </div>
</div>

<!-- Save Portfolio Modal -->
<app-modal #portfolioModal [id]="'portfolioModal'" [showCloseButton]=false [criteria]=true>
    <div class="app-modal-header">
        Save as Portfolio
    </div>
    <div class="app-modal-body">
        <div class="row">
            <search #portfolioSearch [searchType]="1" [isDropDown]=true [displayField]="'name'" [allowNewEntry]=true></search>
        </div>
        <br>
        <div class="row">
            <div class="secondary-text">Share</div>
            <ui-switch size="small" [(ngModel)]="sharePortfolio"></ui-switch>
        </div>
    </div>
    <div class="app-modal-footer">
        <button class="btn btn-transparent" (click)="cancelPortfolioModal()">Cancel</button>
        <button class="btn btn-primary-dark" (click)="saveAsPortfolio()" [disabled]="portfolioSearch.term == ''">Save</button>
    </div>
</app-modal>

<!-- Reorder modal -->
<app-modal #reorderModal [id]="'reorderModal'" [showCloseButton]=true>
    <div class="app-modal-header">
        Reorder columns
    </div>
    <div class="app-modal-body">
        <p>Drag and drop the columns below in the desired order</p>
        <div [sortablejs]="columns" [sortablejsOptions]="sortableOptions">
            <div *ngFor="let item of columns" class="card px-3 py-1 mb-1" [attr.data-key]="item.filterCriteriaId"><span><i class="ti-menu text-dark-grey mr-2"></i>{{ item.name }}</span></div>
        </div>
    </div>
</app-modal>